<template>
	<div>
		<el-row>
			
			<el-col :span="1">
				<p class="queryLabel">润享活动:</p>
			</el-col>
			<el-col :span="4">
				<el-input size="small" v-model="data.name" placeholder="请输入活动名称">
					
				</el-input>
				<!--<el-select size="small" v-model="data.name" placeholder="请输入活动名称" clearable>
					<el-option v-for="item in DList" :label="item.label" :value="item.value"></el-option>
				</el-select>-->
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker type="date" size="small" v-model="data.start" placeholder="起始日期"></el-date-picker>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">至:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker type="date" size="small" v-model="data.stop" placeholder="结束日期"></el-date-picker>
			</el-col>
			
			<el-col :span="4">
				<el-button size="small" type="primary" @click="query">查询</el-button>
			</el-col>
			<el-col :span="4">
			<el-button type="primary" size="small" v-on:click='lookReport'>报表说明</el-button>
			</el-col>
		</el-row>
		
		<el-row>
			<el-col :span="24">
				<el-table :data="reciveData.dataList" border style="width: 100%;align-content: center;">
					<el-table-column prop="companyName" label="公司" width="250"></el-table-column>
					<el-table-column prop="name" label="活动" width="200"></el-table-column>
					<el-table-column label="发券成本" prop="issueCost" width="100">
					</el-table-column>
					<el-table-column label="消费成本" prop="usedCost" width="100">
					</el-table-column>
					<!--2017年10月20日13:45:28 修改 隐藏创建数-->
					<!--<el-table-column label="创建数" prop="joincount" width="100">
					</el-table-column>-->
					<el-table-column label="发放数/成本" width="200" :formatter="Fissue"></el-table-column>
					<el-table-column label="使用数/成本" width="200" :formatter="Fused"></el-table-column>
					<el-table-column label="过期数/成本" width="200" :formatter="Fexpire"></el-table-column>
					<el-table-column label="未使用数/成本" width="200" :formatter="Fsurplus"></el-table-column>
					
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CorrentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="reciveData.total">
				</el-pagination>
			</el-col>
		</el-row>
		
		<el-dialog title="报表说明" v-model="reportShow" size="small">
			<div>
				<b style="font-size: 18px;">发券成本：</b>&nbsp;&nbsp;<b style="font-size: 16px;">优惠券发放所造成的费用支出</b><br><br>
				<b style="font-size: 18px;">消费成本：</b>&nbsp;&nbsp;<b style="font-size: 16px;">活动所需要的费用支出</b><br><br>
				<b style="font-size: 18px;">创建数：</b>&nbsp;&nbsp;<b style="font-size: 16px;">优惠券创建的总数</b><br><br>
				<b style="font-size: 18px;">发放数：</b>&nbsp;&nbsp;<b style="font-size: 16px;">向用户发放的优惠券数</b><br><br>
				<b style="font-size: 18px;">使用数：</b>&nbsp;&nbsp;<b style="font-size: 16px;">用户使用的优惠券数</b><br><br>
				<b style="font-size: 18px;">未使用数：</b>&nbsp;&nbsp;<b style="font-size: 16px;">用户未使用的优惠券数</b><br><br>
				<b style="font-size: 18px;">成本：</b>&nbsp;&nbsp;<b style="font-size: 16px;">成本=工时成本+材料成本</b><br><br>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	export default {
		data:function(){
			return{
				//单位
				department:"",
				//下拉数据
				DList:"",
				//起始日期
				startDate:"",
				//结束日期
				endDate:"",
				data:{
					start:"",
					stop:"",
					companyId:window.localStorage.getItem("companyId"),
					name:"",
					area:"",
					brand:""
				},
				reciveData:{
					total:0,
					dataList:[]
				},
				//报表说明
				reportShow:false,
				//当前页面
				CorrentPage:1,
				//当前页
				page:this.page,
				//公司信息
				companyInfo:[],
				//区域信息
				areaInfo:[],
				//品牌信息
				brandInfo:[],
				// 公司信息查询条件
				areaBrandData:{
					area:"",
					brand:""
				}
				
			}
		},
		methods:{
			//成本
			Fsum:function(row,col){
				var sum = row.gscost+row.degression;;//row.match+
				//gscost+degression
				return temp;
			},
			//发放数计算
			Fissue:function(row,col){
				
				var sum = Number(row.gscost)+Number(row.degression);
				//alert("  gscost:"+row.gscost+"  degression:"+row.degression);
				var temp = row.issue+"/"+ Number(row.issue*sum).toFixed(2);
				if(temp == null || temp =="" || row.issue=="0"){
					return "0";
				}
				else{
					return temp;
				}
				
			},
			//使用数计算
			Fused:function(row,col){
				//var sum = row.gscost+row.degression;
				var sum = Number(row.gscost)+Number(row.degression);
				var temp = row.used+"/"+Number(row.used*sum).toFixed(2);
				if(temp == null || temp =="" || row.used=="0"){
					return "0";
				}
				else{
					return temp;
				}
			},
			//过期数计算
			Fexpire:function(row,col){
				//var sum = row.gscost+row.degression;
				var sum = Number(row.gscost)+Number(row.degression);
				var temp = row.expire+"/"+Number(row.expire*sum).toFixed(2);
				if(temp == null || temp =="" || row.expire=="0"){
					return "0";
				}
				else{
					return temp;
				}
			},
			//未使用数计算
			Fsurplus:function(row,col){
				//var sum = row.gscost+row.degression;
				var sum = Number(row.gscost)+Number(row.degression);
				var temp = row.surplus+"/"+Number(row.surplus*sum).toFixed(2);
				if(temp == null || temp =="" || row.surplus=="0"){
					return "0";
				}
				else{
					return temp;
				}
			},
			//查询按钮
			query:function(){
				//alert("查询");
				debugger;
				this.$data.data.start = this.timeFormates(this.$data.data.start);
				this.$data.data.stop = this.timeFormates(this.$data.data.stop);
				this.$http.post(this.API_ROOT+"/crm/kpi/ActivePage/group",this.$data.data,{
					params:{
						start:this.$data.CorrentPage,
						limit:this.$data.page.pageSize,
					}
				}).then(resp=> {
					if(resp.data.success){
						this.$data.reciveData.total = parseInt(resp.data.total);
						this.$data.reciveData.dataList = resp.data.dataList;
					}
				});
				debugger;
			
			},
			//查看报表说明
			lookReport: function() {
				this.$data.reportShow = true;
			},
			/*getNewList:function(dataList){
				debugger;
				for(var i=0;i<10;i++){
					this.$data.newList[i].match = "111";
					this.$data.newList[i].issueCost = "222";
				}
				var ll = [];
				ll = newList;
				debugger;
				return newList;
			},*/
			
			//有效期解析
			timeFormates: function (date) {
				debugger;
				if (date == "" || date == null) return "";
				return this.moment(date).format("YYYY-MM-DD");
			},
			//分页大小
			handleSizeChange:function(){
			},
			//页面切换
			handleCurrentChange:function(CorrentPage){
				this.$data.CorrentPage = CorrentPage;
				//查询
				this.query();
			}
			
		},
		created:function(){
		
			/*测试*/
			//this.getNewList();
		}
	}
</script>

<style>
</style>